<template>
	<view v-if="!isLoading">
    <xy-flower ref="xyFlower" :cur_url="'shop'"></xy-flower>
    <view class="goodCate">
      <view class="search-box">
        <view class="search-input">
          <input placeholder="搜索商品" v-model="keyword" @confirm="search"/>
          <text class="xyicon icon-search"></text>
        </view>
      </view>

      <swiper class="banner_lists">
        <swiper-item v-for="(item,index) in banner" class="banner_item">
          <image :src="$xyfun.image(item.image)" mode="widthFix"></image>
        </swiper-item>
      </swiper>

      <view class="conter">
        <view class='aside'>
          <scroll-view scroll-y="true" scroll-with-animation='true'>
            <view class='item flex p-tb-20 tc'v-for="(item,index) in categoryList" :style="index==navActive?'background:#f3f3f3':''" :key="index" @click="tapNav(index,item)">
              <view class="line m-r-10" :style="index==navActive?'background-color: #1c98c4;':{backgroundColor:'#f7f7f7'}"></view> <text>{{item.name}}</text>
            </view>
          </scroll-view>
        </view>

        <view class="wrapper">
          <view class="two-cate" v-if="categoryErList.length>1">
            <view class="item tc ts-24" :style="index===tabClick?'background-color: #1c98c4;'+';color:#fff':'background:#fff'"
                  v-for="(item,index) in categoryErList" :key="index" @click="longClick(index)">
              {{item.name}}
            </view>
          </view>

          <view class="goods-list p-lr-25">

            <scroll-view scroll-top="scrollTop" class="goods-list-scroll" show-scrollbar="false" scroll-y="true" scroll-with-animation='true' @scrolltolower="lower" v-if="goodsList.length">

              <view class="item tc m-b-40 ts-26" v-for="(item,index) in goodsList" :key="index">
                <xy-goods-row :item="item" />
              </view>

            </scroll-view>
            <view v-if="!isLoading && isEmpty">
              <xy-empty :text="'暂无商品'" />
            </view>
            <view v-if="!isLoading && !isEmpty" class="loadmore p-t-40 tc ts-26" :style="'color:#808080;'">
              {{loadStatus == 'nomore' ? '没有更多内容啦~' :''}}
            </view>
          </view>
        </view>
      </view>

    </view>
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
  import xyGoodsRow from "@/components/xy-goods/row.vue";
  import xyEmpty from "@/components/xy-empty/index.vue";
  import xyFlower from "@/components/xy-menu/flower.vue";
	export default {
		components: {
      xyFlower,
      xyEmpty, xyGoodsRow,
    },
		data() {
			return {
        isEmpty:true,
        currentPage: 1,
        categoryList: [],
        navActive: 0,
        tabClick:0,
        keyword: '',
        sid: 0,
        cid: 0,
        categoryTitle: '',
        categoryErList: [],
        banner: [],
        goodsList: [],
        isLoading:true,
        scrollTop:0,
        lastPage: 1,
        loadStatus: 'loadmore',
      }
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {
      this.loadData();
      this.getBannerList()
		},
		onShow() {

		},
		onPullDownRefresh() {
		},
		methods: {
      async loadData(){
        var that = this;
        this.$api.get({
          url: '/goods/categories',
          data:{type:'goods'},
          success: (data) => {
            let all_cat = {
              id : 0,
              name : '全部'
            }
            let arr = [all_cat,...data];
            that.categoryTitle = '全部';
            that.navActive = 0;
            that.tabClick = 0;
            that.categoryList = arr;

            that.currentPage = 1;
            that.goodsList = [];
            that.getGoodsList();
          }
        });
      },

      lower(){
        if(this.currentPage < this.lastPage) {
          this.currentPage += 1;
          this.getGoodsList();
        }
      },
      // 产品列表
      getGoodsList: function() {
        var that = this;

        this.$api.get({
          url: '/goods/lists',
          loadingTip:'加载中...',
          data: {
            search: that.keyword,
            page: that.currentPage,
            category_id: that.sid ? that.sid : that.cid,
          },
          success: res => {

            this.goodsList = [...this.goodsList, ...res.data];
            this.isEmpty = !this.goodsList.length;
            this.isLoading = false;
            this.currentPage = res.current_page;
            this.lastPage = res.last_page;
            this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';

          }
        });

      },

      // 产品列表
      getBannerList: function() {
        var that = this;

        this.$api.get({
          url: '/goods/banner',
          loadingTip:'加载中...',
          data: {
          },
          success: res => {
            that.banner = res;

          }
        });

      },

      tapNav(index, item) {
        var list = this.categoryList[index];
        this.scrollTop = 0;
        this.navActive = index;
        this.categoryTitle = list.cate_name;
        this.categoryErList = item.children ? item.children : [];
        this.tabClick = 0;
        this.cid = list.id;
        this.sid = 0;
        this.currentPage = 1;
        this.goodsList = [];
        uni.pageScrollTo({
          scrollTop: this.scrollTop,
          duration: 300
        });

        this.getGoodsList();
      },

      // 导航栏点击
      longClick(index) {
        this.tabClick = index; //设置导航点击了哪一个
        this.sid = this.categoryErList[index].id;
        this.currentPage = 1;
        this.goodsList = [];
        this.getGoodsList();
      },

      search(){
        this.categoryTitle = '全部';
        this.sid = 0;
        this.cid = 0;
        this.navActive = 0;
        this.tabClick = 0;
        this.currentPage = 1;
        this.goodsList = [];
        this.getGoodsList();
      }
		}
	}
</script>

<style>
page{
  background: linear-gradient(to bottom,#a9e7fe,#f3f3f3);
}
</style>
<style scoped lang="scss">
.search-box{
  position: relative;
  height: 100rpx;
  box-sizing: border-box;
  padding: 15rpx 30rpx 0 30rpx;
  background: #fff;
  .icon-search{
    position: absolute;
    left: 30rpx;
    top: 18rpx;
  }
  input{
    background: #f3f3f3;
    height: 60rpx;
    border-radius: 10rpx;
    padding-left: 84rpx;
    font-size: 26rpx;
    margin: 0;
  }
  .search-input{
    position: relative;
    border-radius: 32rpx;
  }
}

.banner_lists{
  padding: 0 20rpx 20rpx 20rpx;
  background: #fff;
  .banner_item{
    border-radius: 10rpx;
    overflow: hidden;
    image{
      width: 100%;
    }
  }
}

.conter {
  display: flex;
  margin-top: 20rpx;
  .aside {
    background-color: #fff;
    width: 23%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99;
    padding-top: 20rpx;

    .item {
      box-sizing: content-box;
      height: 60rpx;
      line-height: 60rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .line {
        width: 6rpx;
        height: 30rpx;
      }
    }
  }

  .goods-list-scroll{

  }

  .wrapper {
    width: 77%;
    float: right;
    padding-bottom: 130rpx;

    .two-cate {
      display: flex;
      padding: 10rpx 20rpx 10rpx 20rpx;
      margin-bottom: 20rpx;
      .item {
        padding: 0 30rpx;
        margin-right: 5%;
        height: 54rpx;
        line-height: 54rpx;
        overflow: hidden;
        border-radius: 27rpx;
      }
      .item:nth-child(3n){margin-right: 0;}

    }
  }
}
</style>
